/* eslint-disable react/no-multi-comp */
import Taro, { Component } from '@tarojs/taro'
import { View, Image, Swiper, SwiperItem } from '@tarojs/components'
import { AtIcon, AtFloatLayout, AtInputNumber, AtButton } from 'taro-ui'
import { observer, inject, Provider } from '@tarojs/mobx'
import styles from './index.module.less'
import Footer from '../../components/Footer'
import PriceDeclare from '../../components/PriceDeclare'
import Card from '../../components/Card'
import CardList from '../../components/CardList'
import cartStore from '../../store/cart'

const store = {
    cartStore
}

const swiperItems = [
    { id: '111', title: '', img: 'https://img.yzcdn.cn/upload_files/2020/03/30/Fk29UIfEQ1VHGQJXhWIziQaCwgTE.jpg!large.jpg', url: 'https://www.baidu.com', desc: '轮播图111' },
    { id: '222', title: '', img: 'https://img.yzcdn.cn/upload_files/2020/03/30/Fu8CAcj-WC9hbBQ627B4eyl27Eny.jpg!large.jpg', url: 'https://www.baidu.com', desc: '轮播图111' },
    { id: '333', title: '', img: 'https://img.yzcdn.cn/upload_files/2020/03/30/Frsln_z3XNhEdwzPBXUOg_DQsHIA.jpg!large.jpg', url: 'https://www.baidu.com', desc: '轮播图111' },
    { id: '333', title: '', img: 'https://img.yzcdn.cn/upload_files/2020/03/30/Frsln_z3XNhEdwzPBXUOg_DQsHIA.jpg!large.jpg', url: 'https://www.baidu.com', desc: '轮播图111' },
    { id: '333', title: '', img: 'https://img.yzcdn.cn/upload_files/2020/03/30/Frsln_z3XNhEdwzPBXUOg_DQsHIA.jpg!large.jpg', url: 'https://www.baidu.com', desc: '轮播图111' },
]

//推荐商品数据
const goods = [
    {
        id: '111',
        price: 199,
        img: 'https://img.yzcdn.cn/upload_files/2019/12/28/FoFDqOTQlnSDm7NiU6lEg6GKzZ7O.JPG!middle.jpg',
        type: '',
        title: '蒙宝盒子来喽~12月龄',
        url: 'https://www.baidu.com',
    },
    {
        id: '222',
        price: 199,
        img: 'https://img.yzcdn.cn/upload_files/2020/04/17/FnrsXTXzS7yEDKzzHdRaGxb-EhM6.png!middle.png',
        type: '',
        title: '蒙宝盒子来喽~13月龄',
        url: 'https://www.baidu.com',
    },
    {
        id: '333',
        price: 199,
        img: 'https://img.yzcdn.cn/upload_files/2019/12/28/FoFDqOTQlnSDm7NiU6lEg6GKzZ7O.JPG!middle.jpg',
        type: '',
        title: '蒙宝盒子来喽~12月龄',
        url: 'https://www.baidu.com',
    },
    {
        id: '444',
        price: 199,
        img: 'https://img.yzcdn.cn/upload_files/2020/04/17/FnrsXTXzS7yEDKzzHdRaGxb-EhM6.png!middle.png',
        type: '',
        title: '蒙宝盒子来喽~13月龄',
        url: 'https://www.baidu.com',
    },
    {
        id: '555',
        price: 199,
        img: 'https://img.yzcdn.cn/upload_files/2019/12/28/FoFDqOTQlnSDm7NiU6lEg6GKzZ7O.JPG!middle.jpg',
        type: '',
        title: '蒙宝盒子来喽~12月龄',
        url: 'https://www.baidu.com',
    },
    {
        id: '66',
        price: 199,
        img: 'https://img.yzcdn.cn/upload_files/2020/04/17/FnrsXTXzS7yEDKzzHdRaGxb-EhM6.png!middle.png',
        type: '',
        title: '蒙宝盒子来喽~13月龄',
        url: 'https://www.baidu.com',
    },
    {
        id: '7',
        price: 199,
        img: 'https://img.yzcdn.cn/upload_files/2019/12/28/FoFDqOTQlnSDm7NiU6lEg6GKzZ7O.JPG!middle.jpg',
        type: '',
        title: '蒙宝盒子来喽~12月龄',
        url: 'https://www.baidu.com',
    },
    {
        id: '8',
        price: 199,
        img: 'https://img.yzcdn.cn/upload_files/2020/04/17/FnrsXTXzS7yEDKzzHdRaGxb-EhM6.png!middle.png',
        type: '',
        title: '蒙宝盒子来喽~13月龄',
        url: 'https://www.baidu.com',
    },
]


@inject('cartStore')
@observer
class Index extends Component {

    constructor(props) {
        super(props)

        this.state = {
            isOpened: false,
            value: 1
        }
    }

    addCart = (item) => {
        this.props.cartStore.addCart(item)
    }

    handleChange(value) {
        this.setState({
            value
        })
    }

    render() {
        const { goodsItem = { id: 'adfedfef88555', title: '蒙宝盒子来喽~12月龄', curPrice: 199.99, price: 299, subTitle: '有多神奇？ 这是一款寓教于乐的盒子！ 这是一款蕴含蒙氏育儿理念的盒子！ 这是一款提供蒙氏育儿策略的盒子！' } } = this.props;
        return (
            <View className={styles.page}>
                <Swiper
                    className={styles.swiper}
                    indicatorColor='#999'
                    indicatorActiveColor='#4a90e2'
                    vertical={false}
                    circular
                    autoplay
                >
                    {swiperItems.map(item =>
                        (<SwiperItem key={item.id} >
                            <Image className={styles.swiperItemImg} src={item.img} />
                        </SwiperItem>))}
                </Swiper>
                <View className={styles.mediaInfo}>
                    <View className={styles.curPrice}>
                        {goodsItem.curPrice}
                    </View>
                    <View className={styles.price}>
                        ￥{goodsItem.price}
                    </View>
                    <View className={styles.mediaInfoTitle}>{goodsItem.title}</View>
                    <View className={styles.mediaInfoSubTitle} >
                        {goodsItem.subTitle}
                    </View>
                </View>
                <View className={styles.infoBar}>
                    <View className={styles.name}>运费</View>
                    <View className={styles.value}>￥10.00</View>
                    <View className={styles.info}>剩余 20</View>
                </View>
                <View className={styles.infoBar}>
                    <View className={styles.name}>服务</View>
                    <View className={styles.value}>收货后结算 · 快递发货</View>
                    <View className={styles.info}>
                        <AtIcon value='chevron-right' size='13' color='#999' />
                    </View>
                </View>
                <View className={styles.infoBar}>
                    <View className={styles.value} style={{ width: '80%' }}>商品评价</View>
                    <View className={styles.info}>暂无评价</View>
                </View>

                {/* <Divider text='更多精选商品'  textStyle={{fontSize:'16Px', color:'#333'}} /> */}
                <View className={styles.recommend}>
                    <View className={styles.recommendTitle}>更多精选商品</View>

                    <View className={styles.columnListContainer}>
                        {goods.map(item => (
                            <View className={styles.divToTwo} key={item.id}>
                                <Card {...item} />
                            </View>
                        ))}
                    </View>
                </View>

                <PriceDeclare />
                <Footer />
                <View className={styles.tabBar}>
                    <View className={styles.tabBarItem}>
                        <AtIcon value='heart' size='17' color='#999' />
                        <View>客服</View>
                    </View>
                    <View className={styles.tabBarItem}>
                        <AtIcon value='shopping-bag' size='17' color='#999' />
                        <View>店铺</View>
                    </View>
                    <View className={styles.tabBarItem} onClick={() => {
                            Taro.navigateTo({
                                url: '../cart/index',
                            })
                        }}
                    >
                        <AtIcon value='shopping-cart' size='17' color='#999' />
                        <View>购物车</View>
                    </View>
                    <View className={styles.tabBarItemLast}>
                        <View className={styles.rightRoundBox} onClick={() => this.setState({ isOpened: true })}> 加入购物车</View>
                        <View className={styles.leftRoundBox} >立即购买 </View>
                    </View>
                </View>
                <AtFloatLayout isOpened={this.state.isOpened} onClose={() => this.setState({ isOpened: false })} >
                    <CardList title={goodsItem.title} subTitle={goodsItem.curPrice} img={swiperItems[0].img} metas={['剩余：99']} type={null} />
                    <View className={styles.infoBar}>
                        <View className={styles.value} style={{ width: '70%' }}>购买数量</View>
                        <AtInputNumber
                            min={1}
                            max={99}
                            step={1}
                            value={this.state.value}
                            onChange={this.handleChange.bind(this)}
                        />
                    </View>
                    <AtButton type='primary' className={styles.button} onClick={() => { this.addCart({ id: goodsItem.id, price: goodsItem.price, curPrice: goodsItem.curPrice, count: this.state.value }); this.setState({ isOpened: false }) }}>确定</AtButton>
                </AtFloatLayout>
            </View >
        )
    }
}

export default props =>
    <Provider store={store}>
        <Index {...props} />
    </Provider>

